<template>
  <div class="alignment-line" :style="{ left, top }">
    <div :class="{'red': (type == 'vertical' && canvasHeight+100 == length) || (type == 'horizontal' && canvasWidth+100 == length)}">
      <div :class="['line', type]" :style="sizeStyle"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, PropType, defineComponent } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { AlignmentLineAxis } from '@/types/edit'

export default defineComponent({
  name: 'alignment-line',
  props: {
    type: {
      type: String as PropType<'vertical' | 'horizontal'>,
      required: true,
    },
    axis: {
      type: Object as PropType<AlignmentLineAxis>,
      required: true,
    },
    length: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const { canvasScale, canvasWidth, canvasHeight } = storeToRefs(useMainStore())

    // 吸附对齐线的位置
    const left = computed(() => props.axis.x * canvasScale.value + 'px')
    const top = computed(() => props.axis.y * canvasScale.value + 'px')

    // 吸附对齐线的长度
    const sizeStyle = computed(() => {
      if (props.type === 'vertical') return { height: props.length * canvasScale.value + 'px' }
      return { width: props.length * canvasScale.value + 'px' }
    })

    return {
      left,
      top,
      sizeStyle,
      canvasWidth,
      canvasHeight,
    }
  },
})
</script>

<style lang="scss" scoped>
.posi {
  position: absolute;
  left: 0;
  top: 0;
}
.alignment-line {
  position: absolute;
  z-index: 100;

  .line {
    width: 0;
    height: 0;
    border: 0 dashed $themeColor;

    &.vertical {
      transform: translateY(-0.5px);
      border-left-width: 1px;
    }
    &.horizontal {
      transform: translateX(-0.5px);
      border-top-width: 1px;
    }
  }
  .red {
    .line {
      border-color: #d14424 !important;
      &.vertical {
        border-left-width: 1.5px;
      }
      &.horizontal {
        border-top-width: 1.5px;
      }
    }
  }
}
</style>